<template>
	<view>
		<cu-custom :bgImage="bgData" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">项目编辑</block>
		</cu-custom>
		
		<form>
			<view class="cu-form-group" style="padding: 10px 15px;">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" style="width: 100% ;margin: unset;" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					 <image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" style="width: 100%;" @tap="ChooseImage" v-if="imgList.length<1">
						<text class='cuIcon-cameraadd' style="font-size: 40px;"></text>
					</view>
				</view>
			</view>
			
			<view class="cu-form-group">
				<view class="title">模块名称</view>
				<input style="text-align: right;" placeholder="输入模块名称" v-model="project.name" name="input"></input>
			</view>
			
		
		</form>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-blue lg" @tap="saveProject">保存</button>
			<button class="cu-btn bg-red margin-tb-sm lg" v-if="isExist&&!isPerson" @tap="deleteProject">删除该项目</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgData: this.imgPath+'back.png',
				imgData: '',
				imgList: [],
				switchC: false,
				moduleName: '',
				imgId: '',
				projectId: '',
				isExist: false,
				isPerson: false,
				project: {
					name: '',
					imgId: ''
				},
			}
		},
		onLoad(e) {
			if(e.id === null || e.id === '' || e.id === undefined) {
				
			} else {
				this.projectId = e.id
				this.showProject(e.id)
				this.isExist = true
				if(e.id === 1 || e.id === '1') {
					this.isPerson = true
				} else {
					this.isPerson = false
				}
				
			}
			
		},
		methods: {
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
						
						uni.uploadFile({
							url: this.serverPath + "common/uploadImg", //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								let obj =JSON.parse(res.data)
								this.project.imgId = obj.data
							},
							
							fail: (err) => {
								console.log(JSON.stringify(err));
							}
						});
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '管理员',
					content: '确定要删除该图片吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			SwitchC(e) {
				this.switchC = e.detail.value
			},
			showProject(id) {
				uni.request({
					url: this.serverPath + 'project/postProjectById',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
						id: id
					},
					success:(res)=> {
						this.project = res.data.data
						this.imgData = this.project.img
						this.imgList.push(this.project.img)
					}
				})
			},
			saveProject() {
				if(this.project.name==null || this.project.name==''){
					uni.showToast({
						icon:'none',
						title:'请输入模块名称'
					})
					return;
				}
				if(this.imgList.length == 0){
					uni.showToast({
						icon:'none',
						title:'请上传背景图'
					})
					return;
				}
				if(this.isExist) {
					this.updateProject()
				} else {
					this.addProject()
				}
			},
			addProject() {
				uni.showLoading({
				    title: '加载中',
					mask:true
				});
				uni.request({
					url: this.serverPath + '/project/addProject',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: this.project,
					success:(res)=> {
						uni.hideLoading();
						if(res.data.status==200) {
							uni.showToast({
								title:'成功添加新模块！',
								success: () => {
									uni.navigateBack({
										delta: 1
									})
								}
							})
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					}
				})
			},
			updateProject() {
				uni.showLoading({
				    title: '加载中',
					mask:true
				});
				uni.request({
					url: this.serverPath + '/project/updateProject',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: this.project,
					success:(res)=> {
						uni.hideLoading();
						if(res.data.status==200) {
							uni.showToast({
								title:'成功更新模块！',
								success: () => {
									uni.navigateBack({
										delta: 1
									})
								}
							})
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					}
				})
			},
			deleteProject() {
				uni.request({
					url: this.serverPath + '/project/deleteProjectById',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {id: this.projectId},
					success:(res)=> {
						uni.hideLoading();
						if(res.data.status==200) {
							uni.showToast({
								title:'模块删除成功！',
								success: () => {
									uni.reLaunch({
										url: "../manage/home"
									})
								}
							})
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
.grid.grid-square>uni-view {
	margin: unset;
}
</style>
